<template>
  <div class="footer-nav">
    <ul class="nav-list">
      <li class="nav-item" v-for="(item,idx) of navList" :key="idx">
        <span :style="{'background-position':ps(idx)}"></span>
        {{ item }}
      </li>
    </ul>
    <div class="toggle" @click="toggle"><span :class="cls"></span>{{ txt }}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navList: ['机票', '酒店', '公寓'],
      txt: '更多',
      cls: 'iconfont xia'
    }
  },
  methods: {
    toggle () {
      if (this.flag === 0) {
        this.navList = ['机票', '酒店', '公寓', '团购', '火车票', '景点', '接送机', '度假', '攻略', '旅图', '车车', '当地人']
        this.flag = 1
        this.txt = '收起'
        this.cls = 'iconfont shang'
      } else {
        this.navList = ['机票', '酒店', '公寓']
        this.flag = 0
        this.txt = '更多'
        this.cls = 'iconfont xia'
      }
    },
    ps (index) {
      return -(index < 7 ? index : index - 7) * 25 + 'px ' + (index > 6 ? -25 : 0) + 'px'
    }
  }
}
</script>

<style scoped lang='stylus'>
  .footer-nav
    color: #9e9e9e
    font-size: .24rem
    position: relative
    overflow: hidden
    .nav-list
      width: 6.4rem
      margin: 0 auto
      overflow: hidden
      padding: 10px 10px 0
      .nav-item
        width: 25%
        float: left
        padding-left: .2rem
        height: .44rem
        line-height: .44rem
        span
          width: .44rem
          height: .44rem
          display: inline-block
          background-image: url(../../../assets/img/nav_7.png)
          background-repeat: no-repeat
          background-size: 3.5rem 1rem
    .toggle
      position: absolute
      bottom: 0
      right: 0
</style>
